Static content, such as your Home Page, About Us, Contact Us, and Terms pages, can be easily created using the Web Page feature.

1. Pre-requisite

No Pre-requisite required

2. How to create a Web Page

To Create a new Web page, go to:

Admin > Website > Web Page

2.1 Tips on making a good Web Page

2.1.1 Title

The initial step is to specify the title of your page. The title holds great importance for search engines, so it's crucial to select a title that accurately represents the keywords you are focusing on for your audience. The route (URL) will be automatically generated based on the title, but you have the option to modify it if needed.

2.1.2 Content

You have the flexibility to write your content using Rich Text, Markdown, or HTML. If you prefer creating simple content pages, Rich Text and Markdown are excellent choices.

2.1.2 Images

For Rich Text Content, you can easily insert images using the editor. However, for Markdown and HTML, you need to first attach the images to the document. Then, you can obtain the URL of the image by right-clicking on the attachment and selecting "Copy Address."

3. Features

3.1 Slideshow

You can enhance your Web Page by including a Slideshow. Learn how to create a Slideshow by referring to the instructions provided in the Slideshow page

3.2 Scheduled Publishing

You can schedule the publishing of your Web Pages by setting a Start Date and End Date. Within the specified date range, the pages will be published and accessible to users. Outside of this range, the pages will automatically become unpublished. If someone tries to access an unpublished page, they will encounter an Error 404.

3.3 Javascript and CSS

You can include a JavaScript script in the "Script" section of your Web Page. Remember to place your script within the "frappe.ready" callback.

frappe.ready(() => {
    // your script here
});

You can apply CSS styling to your Web Page by using the "Style" section. You can inspect the elements to identify the available classes for styling. If you are using HTML Content, you can define your own classes and apply styles to them in this section.

3.4 Sidebar

You have the option to include a Website Sidebar on your Web Page, which can contain custom links. To enable this feature, go to the "Sidebar and Comments" section and check the "Show Sidebar" option. You can choose an existing Website Sidebar or create a new one to be displayed on your Web Page.

3.5 Comments

You have the ability to allow comments on your Web Page, allowing people to leave comments with their Name and Email. To enable this feature, go to the "Sidebar and Comments" section and enable comments.

3.6 Header

You have the option to add custom HTML for the header section of the page, which will replace the default title of the Web Page.

3.7 Breadcrumbs

You have the ability to add a list of breadcrumbs to your Web Page. These breadcrumbs will be displayed at the top, before the header.

3.8 Meta Tags

In addition, you can include Meta Tags on your Web Page. By adding the property key and its corresponding value in the Meta Tag Table, HTML meta tags will be automatically generated for your Web Page.